import React, { useReducer } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import PrivateRoute from "./utils/PrivateRoute"
//解析---user中的状态
import { initState, reducer, actions } from "./reducer/user"
//引入组件-使用懒加载
let Login = React.lazy(() => import("./containers/Login/Login"))
let Register = React.lazy(() => import("./containers/Register/Register"))
let List = React.lazy(() => import("./containers/List/List"))
let Index = React.lazy(() => import("./containers/Index/Index"))

//创建一个Context对象---ReducerContext
export const ReducerContext = React.createContext()

const App = () => {
  //使用reducer/user中解析出来的reducer和initState,,,state为数据，dispatch为方法
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    //给子组件传值-----ReducerContext.Provider value={{state,dispatch,actions}
    <ReducerContext.Provider value={{ state, dispatch, actions }}>
      <React.Suspense fallback={<div>正在加载中。。。。</div>}>
        <Switch>
          <Route path="/login" component={Login} mate={{ title: "手机登录" }}></Route>
          <Route path="/register" exact strict component={Register}></Route>
          <PrivateRoute path="/index" component={Index}></PrivateRoute>
          <PrivateRoute path="/list" component={List}></PrivateRoute>
          <Redirect to="/login"></Redirect>
        </Switch>
      </React.Suspense>
    </ReducerContext.Provider>
  );
}

export default App;
